<template>
  <div class="h-[calc(100%-60px)]">
    <div class="h-[100%] overflow-auto">
      <div class="px-[8px] pb-[8px] w-[100%]">
        <customs-info :data="listData.prediction" @getFormData="getFormData" />
        <shop-info :data="listData.prediction_skus_aggregate" />
        <declare-info :data="listData.prediction_declares" />
        <invoice-info
          :data="listData.prediction_invoices"
          :info="listData"
          ref="invoiceInfoRef"
        />
        <packing-info :data="listData.prediction_boxes" :info="listData" />
        <contractInfo :data="listData.prediction_contracts" />
      </div>
    </div>
    <div
      class="flex items-center justify-center bg-[var(--base-color)] py-[10px] shadow-[0_-3px_6px_0_rgba(51,102,241,0.1)] relative z-10 ml-[8px]"
    >
      <el-button size="large" @click="handleCancel" :disabled="loading">
        取消
      </el-button>
      <el-button
        size="large"
        type="primary"
        @click="handleSave"
        :loading="loading"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import action from "@/utils/action.js";
import customsInfo from "./customsInfo/index.vue";
import shopInfo from "./shopInfo/index.vue";
import declareInfo from "./declareInfo/index.vue";
import invoiceInfo from "./invoiceInfo/index.vue";
import packingInfo from "./packingInfo/index.vue";
import contractInfo from "./contractInfo/index.vue";
import { predictionDetail, predictionUpdate } from "./../api/index.js";
const route = useRoute();
const formvalue = ref({ id: null });
const loading = ref(false);
onMounted(() => {
  const { id } = route.query;
  if (id) {
    getDetail(id);
  }
});
const listData = ref({});
const getDetail = (id) => {
  predictionDetail({ id }).then((res) => {
    res.data.prediction_boxes.box_date = res.data?.prediction?.declare_date;
    res.data.prediction_boxes.invoice_no =
      res.data?.prediction_invoices?.invoice_no;
    listData.value = res?.data || {};
  });
};
const currencyAndRate = ref({
  currency: null,
  exchange_rate: null,
});
provide(
  "currencyAndRate",
  computed(() => {
    return currencyAndRate.value;
  })
);
const getFormData = (data, val) => {
  if (val) {
    listData.value.prediction_contracts.seller_name = val?.seller_name;
    listData.value.prediction_contracts.seller_address = val?.seller_address;
    listData.value.prediction_contracts.seller_phone = val?.seller_tel;
    listData.value.prediction_contracts.seller_fax = val?.seller_fax;
    listData.value.prediction_contracts.buyer_name = val?.buy_name;
    listData.value.prediction_contracts.buyer_address = val?.buy_address;
    listData.value.prediction_contracts.buyer_phone = val?.buy_tel;
    listData.value.prediction_contracts.buyer_fax = val?.buy_fax;
  }
  if (data) {
    listData.value.prediction_boxes.contract_number = data.contract_number;
    listData.value.prediction_contracts.contract_number = data.contract_number;
    listData.value.prediction.domestic_consignors = data.domestic_consignors;
    listData.value.prediction.offshore_consignee = data.offshore_consignee;
    listData.value.prediction.out_declare_company_id =
      data.out_declare_company_id;
    listData.value.prediction.contract_number = data.contract_number;
    listData.value.prediction.pre_exchange_rate = data.pre_exchange_rate;
    listData.value.prediction.pre_currency = data.pre_currency;
    listData.value.prediction.regulatory_approach = data.regulatory_approach;
    currencyAndRate.value.currency = data.pre_currency;
    currencyAndRate.value.exchange_rate = data.pre_exchange_rate;
  }
};
const invoiceInfoRef = ref();
const handleSave = async () => {
  try {
    loading.value = true;
    let table = await invoiceInfoRef.value?.getTableData();
    listData.value.prediction_invoices.details = table?.table || [];
    listData.value.prediction_invoices.invoice_date = table?.time || null;
    const res = await predictionUpdate({
      id: route.query,
      ...listData.value,
    });
    if (res.code !== 200) {
      ElMessage.warning(res.message);
      return;
    }
    ElMessage.success("保存成功");
    handleCancel();
  } catch (e) {
    if (e?.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  action.setGlobalState({
    changeMicoTabsPath: {
      type: "closeActiveTab",
    },
  });
};
</script>

<style></style>
